<template>
  <div>
    <a-tree-select
      v-model="value"
      style="width: 100%"
      :disabled="disabled"
      :tree-data="treeData"
      :replaceFields="replaceFields"
      :dropdown-style="{ maxHeight: maxHeight, overflow: 'auto' }"
      :placeholder="placeholder"
      @change="selectChange"
      allow-clear
      tree-default-expand-all
    >
    </a-tree-select>
  </div>
</template>

<script>
export default {
  name: 'myTreeSelect',
  props: {
    treeData: {
      type: Array,
    },
    maxHeight: {
      type: String,
      default: '400px',
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
    disabled: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    replaceFields: {
      type: Object,
      default: () => {
        return { children: 'children', title: 'title', key: 'key', value: 'value' };
      },
    },
    value: {
      type: String,
    },
  },
  methods: {
    selectChange(value) {
      this.$emit('selectChange', value);
    },
  },
};
</script>

<style scoped>
</style>
